<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <style>
        html,body{
            height:100%;
            overflow: auto;
        }
        #ulactive .active{
            background:#fff ;
            /*color: #fff;*/
        }
        #ulactive{
            position: fixed;
            top:16px;
            right:53px;
            z-index: 9999;
            border-radius: 6px;
            border:1px solid #2F8AE3;
        }
        .query{
            position: fixed;
            top:16px;
            left:30px;
            z-index: 9999;
            border-radius: 6px;
        }
        .query input{
            float:none
        }
        #ulactive li{
            cursor: pointer;
        }
        .select{
            background: #2F8AE3;
            color:#fff;
        }
        .M-box3 .active{
            margin: 0px 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color:#fff;
            text-align:center;
            display: inline-block;
        }
        .M-box3 a{
            margin: 0 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            display: inline-block;
            text-align:center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #bdbdbd;
            text-decoration: none;
        }
        .button{
            background: #00a0e9;
            margin-left:20px;
            padding: 5px 10px;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }
        .begin,.end{
            width:110px;
            height:28px;
            border-radius: 3px;

            border:1px solid #ccc;
        }
        #query{
            display: inline-block;
            margin-right: 10px;
            line-height: 1;
            font-size: 14px;
            padding: 8px 10px;
            background: #2F8AE3;
            color: #fff;
            border-radius: 3px;
            cursor:pointer;
        }
        .mainBg{
           padding-top:9px;
        }
    </style>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <%--<script src="/lib/Highcharts-5.0.14/code/highstock.js"></script>--%>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/js/street/checkTheInformation.js"></script>

<%--    <script src="/lib/Highcharts-5.0.14/code/highcharts-zh_CN.js"></script>--%>
</head>

<body>


    <ul class="clearfix" id="ulactive" style="">
        <li class="fl select" data-type="1" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">日</li>
        <li class="fl" data-type="2" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">周</li>
        <li class="fl" data-type="3" data-type="month" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">月</li>
        <li class="fl" data-type="4" data-type="year" style="padding: 10px 20px;">年</li>
    </ul>
    <div style="padding: 2px 10px;" class="query">
        <input type="text" class="begin" name="beginTime" style="float: none!important;"  onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
        <span>~</span>
        <input type="text" class="end" name="endTime" style="float: none!important;"  onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
        <button id="query">查询</button>
    </div>

<!--
*************************************************************************
   Generated by HCODE at 2017-09-11 14:38:27
   From: https://code.hcharts.cn/demos/hhhhDs
*************************************************************************
 -->
<div id="container" style="min-width: 510px;margin: 10px auto;background: #fff"></div>
    <div class="cont" style="display: none;padding-top: 60px;">

        <div style="margin-top:-35px;margin-bottom:20px;">
            <button class="button">返回</button>
        </div>
        <div class="pagediv" style="margin: 0 auto;width: 97%;">
            <table>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>社区名称</th>
                    <th>巡查时间</th>
                    <th>巡查员</th>
                    <th>检查类型</th>
                    <th>填表时间</th>
                    <th>是否处理事件</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="list"></tbody>
            </table>
        </div>
        <div style="margin: 0px auto 0px;height:50px;width: 97%;" class="clearfix">
            <div id="dbgz_page" class="M-box3" style="float: right; margin-top: 13px;display: none">

            </div>
        </div>
    </div>
    <div class="mainBg" style="background: #fff;display: none">
        <form action="" id="datasave">
            <input type="file"  onchange="filesTwo(this)" multiple="multiple" name="file"
                   style="display: none"/>
            <input type="hidden" name="userId">
            <input type="hidden" name="checkId">
            <div class="mainTitle">
                <ul class="mainTitleUl">
                    <li style="    padding-top: 18px;text-align: center;height: 61px;border-bottom: 1px solid #ddd"><span class="spanSize">网格监管巡查记录表</span> </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">社区名称 <b style="color: red;vertical-align: middle;margin-left: 4px;">*</b></span>
                        <label>
                            <select onchange="subCommunityTwo(this)"  name="subCommunity" id="subCommunity">
                                <option value="">请选择</option>
                            </select>
                        </label>
                        <span>巡查时间<b style="color: red;vertical-align: middle;">*</b></span>
                        <label>
                            <input type="text" name="checkTime" placeholder="请选择巡查时间"
                                   readonly="readonly" id="time">
                        </label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">检查类型<b style="color: red;vertical-align: middle;">*</b></span>
                        <label>
                            <select name="checkType" id="checkId">
                                <option value="">请选择</option>
                            </select>
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">网格名称<b style="color: red;vertical-align: middle;">*</b></span>
                        <label>
                            <select name="gridId">
                                <option value="">请选择</option>
                            </select>
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff;">位置</span>
                        <label style="width: 80%;">
                            <input type="text" name="location" placeholder="请填写位置" style="background: #fcfcfc;    width: 92%;
    float: none;
    margin-top: 0px;">

                        </label>
                    </li>



                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff;height: 144px;line-height: 144px">问题描述</span>
                        <label style="width: 80%;height: 144px;">
                            <textarea name="checkInfo" style="background: #fcfcfc"  placeholder="请填写问题描述"></textarea>
                        </label>
                    </li>

                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff;height: 100px;line-height: 100px">整改前照片</span>
                        <label style="width: 80%;height: 100px;">
                            <div class="picture prevTwo" style="position: relative">
                                <input type="hidden" name="attachmentId">
                                <img class="fl addPhotos" style="    width: 60px;cursor: pointer;
    height: 60px;
    margin-top: 4px;
    margin-right: 7px;" src="/img/grid/addtupin.png" alt="添加照片">
                                <input type="hidden" name="attachmentName">

                                <ul class="fl">
                                    <%--<li>--%>
                                        <%--<img src="/img/app/email.png" alt="">--%>
                                        <%--<b class="deleClear">x</b>--%>
                                    <%--</li>--%>
                                </ul>

                                <%--style="display:none;position: absolute;width: 68px;height: 30px;top: 27px;right: 5px;"--%>

                            </div>
                        </label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff;height: 100px;line-height: 100px">整改后照片</span>
                        <label style="width: 80%;height: 100px;">
                            <div class="picture nextTwo">
                                <input type="hidden" name="attachmentId2">
                                <img class="fl addPhotos" style="    width: 60px;cursor: pointer;
    height: 60px;
    margin-top: 4px;
    margin-right: 7px;" src="/img/grid/addtupin.png" alt="添加照片">



                                <input type="hidden" name="attachmentName2">
                                <ul class="fl">
                                    <%--<li>--%>
                                        <%--<img src="/img/app/email.png" alt="">--%>
                                        <%--<b class="deleClear">x</b>--%>
                                    <%--</li>--%>
                                </ul>



                            </div>
                        </label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff;height: 144px;line-height: 144px">备注</span>
                        <label style="width: 80%;height: 144px;">


                            <textarea name="mark" id=""  placeholder="请填写备注" style="background: #fcfcfc"></textarea>
                        </label>
                    </li>
                    <%--<li class="bordercolor clearfix">--%>
                    <%--<span style="border-bottom: 1px solid #fff;height: 70px;line-height: 70px">巡检人员签字</span>--%>
                    <%--<label style="width: 80%;height: 70px;">--%>
                    <%--<textarea style="height: 40px;margin-top: 8px;" name="" id=""  placeholder="巡检人员请签字" style="background: #f9f9f9"></textarea>--%>
                    <%--</label>--%>
                    <%--</li>--%>

                </ul>
                <div style="height: 88px;line-height: 88px;text-align: center">
                    <a href="javascript:void (0)" class="preservation" style="
                margin-top: 25px;display: inline-block;margin-right: 10px;
                line-height: 1;font-size:18px;padding: 8px 20px;
                background: #2F8AE3;color: #fff;border-radius: 6px">保存</a>
                    <a href="javascript:void (0)" class="getBack"  style="
                margin-top: 25px;display: inline-block;
                line-height: 1;font-size:18px;padding: 8px 20px;background: #2F8AE3;color: #fff;border-radius: 6px">返回</a>
                    <a href="javascript:void (0)" class="shangbao"  style="
                margin-top: 25px;display: inline-block;    margin-left: 12px;
                line-height: 1;font-size:18px;padding: 8px 20px;background: #2F8AE3;color: #fff;border-radius: 6px">上报</a>

                </div>
            </div>
        </form>
    </div>
<script>
    $('#container').height($(window).height()-45)
    var urllocation=$.GetRequest().type;


//    分页列表
    var ajaxPageLe={
        data:{
            page:1,//当前处于第几页
            pageSize:10,//一页显示几条
            useFlag:true
        },
        page:function () {
            var me=this;
            $.ajax({
                url:'/gridCheck/gridByUserName',
                type:'get',
                data:me.data,
                dataType:'json',
                success:function(reg){
                    var arr=reg.datas;
                    var str="";
                    for(var i=0;i<arr.length;i++){
                        str+='<tr checkId="'+arr[i].checkId+'">' +
                            '<td>'+(i+1)+'</td>' +
                            '<td>'+arr[i].gridName+'</td>' +
                            '<td>'+function () {
                                if(arr[i].checkTime!=undefined){
                                    return arr[i].checkTime
                                }else {
                                    return ''
                                }
                            }() +'</td>' +
                            '<td>'+function () {
                                if(arr[i].userId!=undefined){
                                    return arr[i].userName
                                }else {
                                    return ''
                                }
                            }() +'</td>' +
                            '<td>'+arr[i].checkType+'</td>' +
                            '<td>'+function () {
                                if(arr[i].checkTime!=undefined){
                                    return arr[i].checkTime
                                }else {
                                    return ''
                                }
                            }() +
                            '</td>' +
                            '<td>'+function () {
                                if(arr[i].attachmentId!=""||arr[i].attachmentId2!=""){
                                    return '是'
                                }else {
                                    return '否'
                                }
                            }() +'</td>' +
                            '<td><a href="javascript:void(0)" data-id="'+arr[i].checkId+'"  data-type="2" style="color: #00a0e9   " class="btnData checkAll">查看详情</a></td>' +
                            '</tr>'
                    }
                    $('.list').html(str);
                    if(reg.total>10){
                        $('#dbgz_page').show();
                        me.pageTwo(reg.total,me.data.pageSize,me.data.page)
                    }else{
                        $('#dbgz_page').hide();
                    }

                }
            })

        },
        pageTwo:function (totalData, pageSize,indexs) {
            var mes=this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                jump: true,
                coping: true,
                homePage:'',
                endPage: '',
                current:indexs||1,
                callback: function (index){
                    mes.data.page=index.getCurrent();
                    mes.page();
                }
            });
        }
    }
    ajaxPageLe.page();


// 列表返回
    $('.button').click(function(){
        $('.cont').hide();
        $('#container').show();
        $('#ulactive').show();
        $('.query').show();
    })
////    点击详情
//    $('.list').on('click','.detail',function(){
//        $('.mainBg').show();
//        $('.cont').hide();
//    })



    function typeajax(type,startTime,endTime,timeType,fn) {
        $.ajax({
            type : 'get',
            url : '/gridCheck/checkUpdateStatistics',
            dataType : 'json',
            data : {
                timeType:timeType,
                queryType:urllocation,
                startTime:startTime,
                endTime:endTime
            },
            success : function(json) {
                var rsp=json.datas;
                var arrs=[];
                var arrsTwo=[];
                for(var i=0;i<rsp.length;i++){
                    var obj={};
                    obj.name=rsp[i].name;
                    obj.id=rsp[i].name;
                    obj.gridId=rsp[i].id;
                    obj.index=(i+1);
                    obj.data=[];
                    var objTwo={};
                    objTwo.name=rsp[i].name;
                    objTwo.drilldown=rsp[i].name;
                    objTwo.id=rsp[i].id
                    objTwo.y=rsp[i].y;
                    objTwo.indexs=i+1;
                    arrsTwo.push(objTwo)
                    for(var m=0;m<rsp[i].data.length;m++){
                        var arrData=[];
                        arrData.push(rsp[i].data[m].name)
                        arrData.push(rsp[i].data[m].y)
                        arrData.push(rsp[i].id)
                        arrData.push(indexs=i+1);
                        obj.data.push(arrData);
                    }
                    arrs.push(obj)

                }
                console.log(arrsTwo)
                // Create the chart
                fn(arrsTwo,arrs,type)
            }
        });
    }


    $(function () {
        $("#query").click(function () {
            var endTime=$("input[name='endTime']").val();
            var startTime=$("input[name='beginTime']").val();
            typeajax(urllocation,startTime,endTime,'',function (arrs,arrsTwo,type) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    scrollbar: {
                        enabled: true
                    },
                    title: {
                        text: '巡检次数'
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
//                        max:5, //3.设置显示个数
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '巡检次数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){
                                    var index=e.point.series.userOptions.index;
                                    var gridId=e.point.series.userOptions.gridId
                                    if(e.point.options.drilldown==undefined){
                                        $('.cont').show();
                                        $('#container').hide();
                                        $('#ulactive').hide();
                                        $('.query').hide();
                                        $('#dbgz_page').show();
//                                        console.log(e.point.options)
                                        ajaxPageLe.data.userName=e.point.options.name;

                                        if(type==2){
                                            ajaxPageLe.data.type=index;
                                            ajaxPageLe.data.timeType='';
                                            ajaxPageLe.data.startTime=startTime;
                                            ajaxPageLe.data.endTime=endTime;
                                        }else if(type=='grid'){
                                            ajaxPageLe.data.gridIds=gridId;
                                            ajaxPageLe.data.timeType='';
                                            ajaxPageLe.data.startTime=startTime;
                                            ajaxPageLe.data.endTime=endTime;
                                        }
                                        ajaxPageLe.page()
    //                                        alert(type)
    //                                        alert(e.point.options.name)
                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '巡检次数',
                        colorByPoint: true,
                        data: arrs
                    }],
                    drilldown: {
                        series:arrsTwo
                    }
                });
            })
        })

            typeajax(urllocation,"","",1,function (arrs,arrsTwo,type) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '巡检次数'
                    },
                    scrollbar: {
                        enabled: true
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
//                        max:10, //3.设置显示个数
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '巡检次数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){
//                                    console.log(e.point.series.userOptions)
                                    var index=e.point.series.userOptions.index;
                                    var gridId=e.point.series.userOptions.gridId
                                    if(e.point.options.drilldown==undefined){
                                        $('.cont').show();
                                        $('#container').hide();
                                        $('#ulactive').hide();
                                        $('.query').hide();
                                        $('#dbgz_page').show();
//                                        console.log(e.point.options)
                                        ajaxPageLe.data.userName=e.point.options.name;

                                        if(type==2){
                                            ajaxPageLe.data.type=index;
                                            ajaxPageLe.data.startTime='';
                                            ajaxPageLe.data.endTime='';
                                            ajaxPageLe.data.timeType=$('.select').attr('data-type')
                                        }else if(type=='grid'){
                                            ajaxPageLe.data.gridIds=gridId;
                                            ajaxPageLe.data.startTime='';
                                            ajaxPageLe.data.endTime='';
                                            ajaxPageLe.data.timeType=$('.select').attr('data-type')
                                        }
                                        ajaxPageLe.page()
//                                        alert(type)
//                                        alert(e.point.options.name)
                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '巡检次数',
                        colorByPoint: true,
                        data: arrs
                    }],
                    drilldown: {
                        series:arrsTwo
                    }
                });
            })
//        })
        $($('#ulactive li')[0]).click()

        $('#ulactive li').click(function(){
            $(this).addClass('select').siblings().removeClass('select')
            var dataType=$(this).attr('data-type');
            typeajax(urllocation,'','',dataType,function (arrs,arrsTwo,type) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '巡检次数'
                    },
                    credits: {
                        enabled: false
                    },
                    scrollbar: {
                        enabled: true
                    },
                    subtitle: {
                        text: '点击可查看详细信息'

                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            formatter: function() {
                                return this.value;
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: '巡检次数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){
                                    var index=e.point.series.userOptions.index;
                                    var gridId=e.point.series.userOptions.gridId
                                    if(e.point.options.drilldown==undefined){
                                        $('.cont').show();
                                        $('#container').hide();
                                        $('#ulactive').hide();
                                        $('.query').hide();
                                        $('#dbgz_page').show();
//                                        console.log(e.point.options)
                                        ajaxPageLe.data.userName=e.point.options.name;

                                        if(type==2){
                                            ajaxPageLe.data.type=index;
                                            ajaxPageLe.data.timeType=dataType;
                                            ajaxPageLe.data.startTime='';
                                            ajaxPageLe.data.endTime='';
                                        }else if(type=='grid'){
                                            ajaxPageLe.data.gridIds=gridId;
                                            ajaxPageLe.data.timeType=dataType;
                                            ajaxPageLe.data.startTime='';
                                            ajaxPageLe.data.endTime='';
                                        }
                                        ajaxPageLe.page()
                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '巡检次数',
                        colorByPoint: true,
                        data: arrs
                    }],
                    drilldown: {
                        series:arrsTwo
                    }
                });
            })
        })

    });
</script>
</body>
</html>